<template>
	<!-- 入驻enter -->
	<view>
		<u-navbar title="申请入驻" :autoBack="true" :placeholder="true"></u-navbar>
		<view class="minBox">
			<u--form :model="form" ref="uForm" :rules="rules" labelWidth="100">
				<!-- 姓名 -->
				<view class="info">
					<u-form-item label="姓名" prop="user_name" required>
						<input type="text" placeholder="请输入姓名" v-model="form.user_name" placeholder-class="class">
					</u-form-item>
				</view>
				<!-- 性别 -->
				<view class="info">
					<u-form-item label="性别">
						<view class="gender">
							<view class="item" @click="form.gender =1">
								<image v-if="form.gender ===1" src="http://qiniu.suboshimuying.cn/static/cart/check.png"
									mode=""></image>
								<image v-else src="http://qiniu.suboshimuying.cn/static/order/icon24@2x.png" mode="">
								</image>
								男
							</view>
							<view class="item" @click="form.gender =2">
								<image v-if="form.gender ===2" src="http://qiniu.suboshimuying.cn/static/cart/check.png"
									mode=""></image>
								<image v-else src="http://qiniu.suboshimuying.cn/static/order/icon24@2x.png" mode="">
								</image>
								女
							</view>
						</view>
					</u-form-item>
				</view>
				<!-- 年龄 -->
				<view class="info">
					<u-form-item label="年龄" prop="age" required>
						<input type="number" placeholder="请填写您的年龄" v-model="form.age" placeholder-class="class">
					</u-form-item>
				</view>
				<!-- 营业模式 -->
				<view class="info">
					<u-form-item label="营业模式">
						<view class="gender">
							<view class="item" @click="form.dotype =1">
								<image v-if="form.dotype===1" src="http://qiniu.suboshimuying.cn/static/cart/check.png"
									mode=""></image>
								<image v-else src="http://qiniu.suboshimuying.cn/static/order/icon24@2x.png" mode="">
								</image>
								店铺
							</view>
							<view class="item" @click="form.dotype =2">
								<image v-if="form.dotype===2" src="http://qiniu.suboshimuying.cn/static/cart/check.png"
									mode=""></image>
								<image v-else src="http://qiniu.suboshimuying.cn/static/order/icon24@2x.png" mode="">
								</image>
								个人
							</view>
						</view>
					</u-form-item>
				</view>
				<!-- 从业时长 -->
				<view class="info">
					<u-form-item label="从业时长" prop="practlen" required>
						<input type="text" placeholder="请填写您的从业时长" v-model="form.practlen" placeholder-class="class">
					</u-form-item>
				</view>
				<!-- 联系方式 -->
				<view class="info">
					<u-form-item label="联系方式" prop="mobile" required>
						<input type="number" placeholder="请填写您的联系方式" v-model="form.mobile" placeholder-class="class">
					</u-form-item>
				</view>
				<!-- 家庭住址 -->
				<view class="info">
					<u-form-item label="家庭住址" prop="home_address" required>
						<input type="text" placeholder="请填写您的家庭住址" v-model="form.home_address"
							placeholder-class="class">
					</u-form-item>
				</view>

				<view style="width: 100%;height: 12rpx; background-color:rgba(248,249,254,1);">
				</view>

				<!-- 紧急联系人1 -->
				<view class="info">
					<u-form-item label="紧急联系人" prop="linkman_one" required>
						<input type="text" placeholder="请填写您的紧急联系人姓名" v-model="form.linkman_one"
							placeholder-class="class">
					</u-form-item>
				</view>
				<!-- 联系电话1 -->
				<view class="info">
					<u-form-item label="联系电话" prop="mobile_one" required>
						<input type="number" placeholder="请填写您的紧急联系人电话" v-model="form.mobile_one"
							placeholder-class="class">
					</u-form-item>
				</view>

				<view style="width: 100%;height: 12rpx; background-color:rgba(248,249,254,1);">
				</view>

				<!-- 紧急联系人2 -->
				<view class="info">
					<u-form-item label="紧急联系人">
						<input type="text" placeholder="请填写您的紧急联系人姓名" v-model="form.linkman_two"
							placeholder-class="class">
					</u-form-item>
				</view>
				<!-- 联系电话2 -->
				<view class="info">
					<u-form-item label="联系电话">
						<input type="text" placeholder="请填写您的紧急联系人电话" v-model="form.mobile_two"
							placeholder-class="class">
					</u-form-item>
				</view>

				<view style="width: 100%;height: 12rpx; background-color:rgba(248,249,254,1);">
				</view>

				<!-- 所在城市 -->
				<view class="info">
					<u-form-item label="所在城市" prop="area_id" required>
						<view class="region" @click="areaClick">
							<input type="text" placeholder="请选择您当前所在城市" :value="areaName" placeholder-class="class"
								disabled>
							<image src="http://qiniu.suboshimuying.cn/static/user/ic-arrow@2x.png" mode=""></image>
						</view>
					</u-form-item>
				</view>
			</u--form>
		</view>
		<!-- 请上传您的身份证照片 -->
		<view class="uploadBox">
			<view class="title">
				<text style="color: red;">*</text>
				<text>请上传您的身份证照片</text>
			</view>
			<view class="upload">
				<ImgUpload width="160" height="120" :maxCount="1"
					imgUrl="http://qiniu.suboshimuying.cn/static/enter/img_id_card1@2x.png" @callback="callback1" />
				<ImgUpload width="160" height="120" :maxCount="1"
					imgUrl="http://qiniu.suboshimuying.cn/static/enter/img_id_card2@2x.png" @callback="callback2" />
			</view>
		</view>
		<!-- 营业执照 职业技能证书-->
		<view class="uploadBox">
			<view class="title">请上传您的{{form.dotype===1? '营业执照': '职业技能证书'}}(支持多张上传)</view>
			<view class="upload">
				<ImgUpload width="160" height="120" imgUrl="http://qiniu.suboshimuying.cn/static/enter/img_id_card3@2x.png"
					@callback="callback3" />
			</view>
		</view>
		<!-- 保存按钮 -->
		<view class="btnBox" @click="submit">
			提交申请
		</view>
	</view>
</template>

<script>
	import ImgUpload from '@/components/ImgUpload/ImgUpload.vue'
	export default {
		components: {
			ImgUpload
		},
		data() {
			const mobile = (rule, value, callback) => {
				/^1[3-9]\d{9}$/.test(value) ? callback() : callback(new Error('请输入正确的手机号码'))
			}
			return {
				form: {
					user_name: '', //姓名
					gender: 1, //性别（1=男,2=女）
					age: "", //年龄
					dotype: 1, //营业模式（1=店铺,2=个人）
					practlen: "", //从业时长
					mobile: "", //手机号
					home_address: "", //家庭住址
					linkman_one: "", //紧急联系人1
					mobile_one: "", //紧急联系人1电话
					linkman_two: "", //紧急联系人2
					mobile_two: "", //紧急联系人2电话
					area_id: null, //地区id
					idcard_images: "", //身份证照片
					trad_image: "", //营业执照
					certificate_image: "", //职业技能证书
				},
				areaName: "", //所在城市
				imgUrl1: [], //身份证正面
				imgUrl2: [], //身份证反面
				rules: {
					user_name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}],
					age: [{
						required: true,
						message: '请输入年龄',
						trigger: ['blur', 'change']
					}],
					practlen: [{
						required: true,
						message: '请填写从业时长',
						trigger: ['blur', 'change']
					}],
					mobile: [{
							type: 'string',
							max: 11,
							min: 11,
							required: true,
							message: '请输入正确手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: mobile,
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					home_address: [{
						required: true,
						message: '请填写家庭住址',
						trigger: ['blur', 'change']
					}],
					linkman_one: [{
						required: true,
						message: '请填写您的紧急联系人姓名',
						trigger: ['blur', 'change']
					}],
					mobile_one: [{
							type: 'string',
							max: 11,
							min: 11,
							required: true,
							message: '请输入正确手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: mobile,
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					area_id: [{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// console.log(value);
							return value === null ? false : true;
						},
						message: '请选择您当前所在城市',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
				},
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 地址点击
			areaClick() {
				uni.navigateTo({
					url: `/subPages/city/city`,
					events: {
						areaBack: data => {
							this.areaName = data.name
							this.form.area_id = data.id
							// console.log(data);
						}
					}
				})
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					if (this.imgUrl1.length === 0 || this.imgUrl2.length === 0) {
						uni.$u.toast('请上传身份证照片')
					} else {
						this.form.idcard_images = this.imgUrl1[0].url + ',' + this.imgUrl2[0].url
						console.log(this.form);
						this.addEnter()
					}
					// uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('请正确填写信息')
				})
			},
			async addEnter() {
				let {
					code,
					msg
				} = await this.$api.addEnter(this.form)
				uni.$u.toast(msg)
				if (code === 1) {
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
				// console.log(res);
			},
			// 上传回调
			callback1(e) {
				this.imgUrl1 = e
				// console.log(e);
			},
			callback2(e) {
				this.imgUrl2 = e
				// console.log(e);
			},
			callback3(e) {
				// console.log(e);
				// dotype: 1=店铺,2=个人
				if (e.length === 0) {
					if (this.form.dotype === 1) this.form.trad_image = ""
					else this.form.certificate_image = ""
				} else {
					if (this.form.dotype === 1) this.form.trad_image = e[0].url
					else this.form.certificate_image = e[0].url
				}
			},
		},
	}
</script>

<style>
	page {
		box-sizing: border-box;
		padding-bottom: 88rpx;
	}

	.u-form-item {
		width: 100%;
		padding: 0;
	}

	.u-navbar__content__title {
		color: rgba(0, 0, 0, 0.8);
		font-size: 32rpx;
		font-weight: 700;
	}
</style>
<style lang="scss" scoped>
	.minBox {
		// padding: 0 32rpx 0;

		.info {
			// padding: 0 32rpx 0;
			width: 100%;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			background-color: #fff;
			padding: 8rpx 32rpx;
			// border-bottom: 1rpx solid rgba(151, 151, 151, 0.1);

			input {
				flex: 1;
				color: rgba(0, 0, 0, 1);
			}

			.class {
				color: rgba(0, 0, 0, 1);
				font-size: 28rpx;
			}
		}
	}

	.btnBox {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 93%;
		margin: 30rpx auto;
		height: 88rpx;
		border-radius: 600rpx;
		background: linear-gradient(131.2deg, rgba(179, 142, 255, 1) 0%, rgba(130, 111, 255, 1) 100%);
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-weight: 700;
	}

	.region {
		display: flex;
		justify-content: space-between;
		width: 100%;
		color: rgba(0, 0, 0, 0.4);
		font-size: 28rpx;

		image {
			margin-top: 8rpx;
			width: 18rpx;
			height: 24rpx;
		}
	}

	.gender {
		display: flex;
		align-items: center;
		align-items: center;

		.item {
			margin-right: 36rpx;
			display: flex;
			align-items: center;
			align-items: center;
		}

		image {
			margin-right: 8rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.uploadBox {
		box-sizing: border-box;
		background-color: #fff;
		padding: 8rpx 16rpx;
		// border-bottom: 1rpx solid rgba(151, 151, 151, 0.1);

		.title {
			color: rgba(0, 0, 0, 1);
		}

		.upload {
			margin-top: 16rpx;
			display: flex;
			justify-content: space-between;
		}
	}
</style>
